{include file="common/head"}
<head>
<title>会员注册</title>
<style type="text/css">
    html{height: 100%;}
    #top{background: initial;border-bottom:1px solid skyblue;}
    #top div{color: white;}
</style>


</head>
<body style="background-image: linear-gradient(to bottom right,#03f, #0ff);">
    <div class="container p-5 my-5 "  style="max-width: 800px;margin:0 auto;">
     
    <div id="top" class="text-center row text-primary">
      <div class="col-2"></div>
      <div class="col-8">{$sys.sys_name} 会员注册(register)</div>
      <div class="col-2"></div>
    </div>

    <form method="post" action="/index.php/customer/register">

      <div class="mb-3">
        <label for="title" class="form-label" style="color:red;">姓名(Name):*</label>
        <input type="text" class="form-control" id="name" name="name" value="" placeholder="Member name" />
      </div>
      <div class="mb-3">
        <label for="title" class="form-label" style="color:red;">手机号码(Mobile):*</label>
        <input type="text" class="form-control" id="mobile" name="mobile" value="" placeholder="Mobile" />
      </div>
      <div class="mb-3">
        <label for="password" class="form-label" style="color:red;">密码(Password):*</label>
        <input type="text" class="form-control" id="password" name="password" value="" placeholder="Password" />
      </div>      
      <div class="mb-3">
        <label for="title" class="form-label">其他联系方式(wx,facebook):</label>
        <input type="text" class="form-control" id="wx" name="wx" value="" placeholder="wx,facebook" />
      </div>

      <div class="mb-3">
        <label for="title" class="form-label"></label>
          <input type="radio" class="form-check-input" id="radio1" name="sex" value="1"  checked /> 
          <label class="form-check-label" for="radio1">先生(Man)</label>
          <input type="radio" class="form-check-input" id="radio2" name="sex" value="2" />
          <label class="form-check-label" for="radio2">女士(Female)</label>
      </div>

      <div class="mb-3" style="position: relative;">
        <label class="form-check-label">Verify Code:</label>
          <div class="input-group">
            <input class="form-control" type="text" id="verify" name="verify" /> 
            <img src="/index.php/login/verify" id="validate" onclick="verifyReload();" style="margin: 1px" />
          </div>
      </div>

      <div class="text-center d-grid">
      <button  type="button" class="btn btn-primary btn-block" onclick="register()">注册(Register)</button>
      <div style="height: 10px;"></div>
      <button  type="button" class="btn btn-warning btn-block" onclick="login()">登录(Login)</button>
    </div>

    </form>
    </div>

<script type="text/javascript">
  $(document).ready(function(){
    verifyReload();
  })


    function verifyReload(){
        validate = document.getElementById('validate');
        validate.src = "";
        validate.src = "/index.php/login/verify/temp/"+new Date().getTime().toString(36);
    }

    function login(){
      location.href="/index.php/login/customer_login";
    }
    function register(){
      if(!$("#name").val()) {
        layer.msg("无效的名称(Invalid name)!");
        return 0;
      }    
      if(!$("#mobile").val()) {
        layer.msg("无效的电话(Invalid mobile)!");
        return 0;
      }       
      if(!$("#password").val()) {
        layer.msg("无效的密码(Invalid Password)!");
        return 0;
      }  

      //询问框
      layer.confirm('是否确定保存?', {
        btn: ['YES','CANCEL'] //按钮
      }, function(){

        var data = {
          name:$("#name").val(),
          password:$("#password").val(),
          mobile:$("#mobile").val(),
          wx:$("#wx").val(),
          sex:$("input[type='radio']:checked").val(),
          verify:$("#verify").val()
        };
        $.post('/index.php/customer/register',data,function(res){
          var res=JSON.parse(res);
          console.log(res);
          if(res.code){
            layer.msg('注册成功(Register successed)!');
          }else{
            layer.msg(res.msg);
            verifyReload();
          }
        });
        //$('form').submit();


      }, function(){
        layer.msg("Cancel!");
        return 0;
      });
    }

</script>


</body>
</html>
